<template>
  <div class="chat-toolbar">
    <div class="toolbar-left">
      <a-Popover v-model:visible="isEmojivisible" trigger="click">
        <template #content>
          <tool-emoticon :isEmojivisible="isEmojivisible"
        /></template>
        <a-button class="emoji-btn" type="text" shape="circle" size="small"
          >😀</a-button
        >
      </a-Popover>

      <a-Popover v-model:visible="isPicvisible" trigger="click">
        <template #content> <p>这里是上传文件</p></template>
        <a-button shape="circle" type="text" size="small">
          <template #icon><picture-outlined class="emoji-btn" /></template>
        </a-button>
      </a-Popover>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, provide, ref } from 'vue';
import ToolEmoticon from './emoticon/index.vue';
import { Popover } from 'ant-design-vue';
import { PictureOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  name: 'ChatToolBar',
  components: {
    ToolEmoticon,
    [Popover.name]: Popover,
    PictureOutlined,
  },
  props: {
    chatForm: {
      type: Object,
    },
  },
  setup(props) {
    // toolbar功能
    const isEmojivisible = ref(false);
    const isPicvisible = ref(false);
    const getEmoji = (item: string) => {
      props.chatForm!.chatContent += item;
      isEmojivisible.value = false;
      isPicvisible.value = false;
    };
    provide('getEmoji', getEmoji);
    provide('hadePopover', function () {
      isEmojivisible.value = false;
    });

    return { isEmojivisible, isPicvisible };
  },
});
</script>

<style scoped lang="scss">
.toolbar-left {
  margin-bottom: 3px;

  .emoji-btn {
    margin-left: 5px;

    font-size: 18px;
  }
}
</style>
